<template>
  <div class="f-recipe-main">
    <div class="add_btn_top">
      <!-- <el-radio-group v-model="type" size="small" @change="changeType">
        <el-radio-button label="列表"></el-radio-button>
        <el-radio-button label="甘特图"></el-radio-button>
      </el-radio-group> -->
      <div style="margin: 0 10px" :style="{ color: switchTextColor }">
        {{ switchText }}
      </div>
      <el-switch class="screenSwitch" active-color="#2680D2" v-model="screen">
      </el-switch>
    </div>
    <el-container>
      <el-main style="padding: 0; background: #fff" class="">
        <div style="width:100%;" class="flex-x flex-center">
          <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
            <el-tab-pane
              v-for="item in manufactureSiteList"
              :key="item.name"
              :label="item.name"
              :name="item.name"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <el-table height="100px" v-adaptive :data="list" size="small" border>
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-table
                v-if="scope.row.childrenList && scope.row.childrenList.length"
                v-adaptive
                :data="scope.row.childrenList"
                size="small"
                border
              >
                <el-table-column type="expand">
                  <template slot-scope="childrenScope">
                    <el-table
                      style="margin-top: 10px"
                      :data="renderStageTable(childrenScope.row)"
                      border
                      size="mini"
                    >
                      <el-table-column
                        :prop="item.key"
                        show-overflow-tooltip
                        :label="item.label"
                        align="center"
                        v-for="(item, index) in _formulaInfo(childrenScope.row)"
                        :key="index"
                      >
                        <template slot-scope="downscope">
                          <span v-if="item.type == 'radio'">
                            {{ radioLable(item, downscope) }}
                          </span>
                          <span v-else>
                            {{ downscope.row[item.key] || "-" }}
                          </span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  type="index"
                  label="序号"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="taskChildNumber"
                  label="任务号"
                  align="center"
                >
                  <template slot-scope="childrenScope">
                    {{ childrenScope.row.taskNumber }}
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="deviceName"
                  label="设备名称"
                  align="center"
                >
                </el-table-column
                ><el-table-column
                  show-overflow-tooltip
                  prop="deviceToken"
                  label="设备编号"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="taskStatus"
                  label="状态"
                  align="center"
                >
                  <template slot-scope="childrenScope">
                    <span v-if="childrenScope.row.taskStatus === '0'"
                      >未下达</span
                    >
                    <span v-if="childrenScope.row.taskStatus === '1'"
                      >已下达</span
                    >
                    <span v-if="childrenScope.row.taskStatus === '2'"
                      >正在执行</span
                    >
                    <span v-if="childrenScope.row.taskStatus === '3'"
                      >完成</span
                    >
                    <span v-if="childrenScope.row.taskStatus === '4'"
                      >终止</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="lastOutTime"
                  label="时间"
                  align="center"
                >
                  <template slot-scope="childrenScope">
                    {{ childrenScope.row.createdDate | formatDate }}
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="partNumber"
                  show-overflow-tooltip
                  label="零件号"
                >
                  <template slot-scope="childrenScope">
                    {{ childrenScope.row.partNumber }}
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="partNumber"
                  label="零件名称"
                  align="center"
                >
                  <template slot-scope="childrenScope">
                    {{ childrenScope.row.partName }}
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="batchNumber"
                  label="批次号"
                  align="center"
                >
                  <template slot-scope="childrenScope">
                    {{ childrenScope.row.batchNumber }}
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="processNumber"
                  label="工序号"
                  align="center"
                >
                  <template slot-scope="childrenScope">
                    {{ childrenScope.row.processNumber }}
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="processName"
                  label="工序名称"
                  align="center"
                >
                  <template slot-scope="childrenScope">
                    {{ childrenScope.row.processName }}
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="partTotalCount"
                  label="数量"
                  align="center"
                >
                  <template slot-scope="childrenScope">
                    {{ childrenScope.row.partTotalCount }}
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="materialMark"
                  label="材料牌号"
                  align="center"
                >
                  <template slot-scope="childrenScope">
                    {{ childrenScope.row.materialMark }}
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="craftVersion"
                  label="工艺版次"
                  align="center"
                >
                  <template slot-scope="childrenScope">
                    {{ childrenScope.row.craftVersion }}
                  </template>
                </el-table-column>
              </el-table>
              <el-table
                style="margin-top: 10px"
                :data="renderStageTable(scope.row)"
                border
                size="mini"
              >
                <el-table-column
                  :prop="item.key"
                  show-overflow-tooltip
                  :label="item.label"
                  align="center"
                  v-for="(item, index) in _formulaInfo(scope.row)"
                  :key="index"
                >
                  <template slot-scope="downscope">
                    <span v-if="item.type == 'radio'">
                      {{ radioLable(item, downscope) }}
                    </span>
                    <span v-else>
                      {{ downscope.row[item.key] || "-" }}
                    </span>
                  </template>
                </el-table-column>
                <!-- <el-table-column
                  align="center"
                  prop="stageId"
                  min-width="200px"
                  show-overflow-tooltip
                  label="阶段号"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="setTemp"
                  min-width="200px"
                  label="设定温度"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="setTime"
                  min-width="200px"
                  show-overflow-tooltip
                  label="设定时间"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="volumeTemp"
                  min-width="200px"
                  show-overflow-tooltip
                  label="温度公差"
                >
                </el-table-column> -->
              </el-table>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            type="index"
            label="序号"
            align="center"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="taskChildNumber"
            label="任务号"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.taskNumber }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="deviceName"
            label="设备名称"
            align="center"
          >
          </el-table-column
          ><el-table-column
            show-overflow-tooltip
            prop="deviceToken"
            label="设备编号"
            align="center"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="taskStatus"
            label="状态"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.taskStatus === '0'">未下达</span>
              <span v-if="scope.row.taskStatus === '1'">已下达</span>
              <span v-if="scope.row.taskStatus === '2'">正在执行</span>
              <span v-if="scope.row.taskStatus === '3'">完成</span>
              <span v-if="scope.row.taskStatus === '4'">终止</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="lastOutTime"
            label="时间"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.createdDate | formatDate }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="partNumber"
            show-overflow-tooltip
            label="零件号"
          >
            <template slot-scope="scope">
              {{ scope.row.partNumber }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="partNumber"
            label="零件名称"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.partName }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="batchNumber"
            label="批次号"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.batchNumber }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="processNumber"
            label="工序号"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.processNumber }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="processName"
            label="工序名称"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.processName }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="partTotalCount"
            label="数量"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.partTotalCount }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="materialMark"
            label="材料牌号"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.materialMark }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="craftVersion"
            label="工艺版次"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.craftVersion }}
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          @pagination="pagination"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          :pageSizes.sync="pageSizes"
        />
      </el-main>
      <el-aside
        style="background: #fff; padding: 10px; margin-left: 10px"
        width="18%"
        v-show="screen"
      >
        <Search :dataAll="dataAll" @setFilterList="setFilterList"></Search>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
const COLUMN_LIST = [
  {
    label: "任务号",
    prop: "token",
    width: "100px"
  },
  {
    label: "班产任务号",
    prop: "productionTaskNumber",
    width: "120px"
  },

  {
    label: "来件单位",
    prop: "unit",
    width: "100px",
    hideCheck: true
  },
  {
    label: "加工区域",
    prop: "manufactureSite",
    width: "100px"
  },

  {
    label: "批次号",
    prop: "batchNumber",
    width: "100px"
  },
  {
    label: "零件号",
    prop: "partNumber",
    width: "100px"
  },
  {
    label: "零件名称",
    prop: "partName",
    width: "100px"
  },
  {
    label: "委托工序号",
    prop: "entrustProcessNumber",
    width: "100px",
    showoverflowtooltip: true
  },
  {
    label: "工序/工步号",
    prop: "processNumber",
    width: "100px"
  },
  {
    label: "工序/工步名称",
    prop: "processName",
    width: "100px"
  },
  {
    label: "工艺版次",
    prop: "formulaVersion",
    width: "100px"
  },
  {
    label: "材料牌号",
    prop: "materialGradle",
    width: "120px"
  },
  {
    label: "来件数量",
    prop: "partTotalCount",
    width: "100px"
  },
  {
    label: "开工时间",
    prop: "startTime",
    width: "100px"
  },
  {
    label: "状态",
    prop: "state"
  }
];
const COLUMN_BASE_LIST = [
  {
    label: "阶段号",
    key: "stageId"
  },
  {
    label: "设定温度",
    key: "setTemp"
  },
  {
    label: "设定时间",
    key: "setTime"
  },
  {
    label: "温度公差",
    key: "volumeTemp"
  }
];
import { mapGetters } from "vuex";
import Pagination from "@/views/common/page";
import { getTaskDownLoadInfos } from "@/api/deviceOperation";
import { taskDownloadZK } from "@/api/zk";
import Search from "./Search.vue";
import { currentDate } from "@/utils/currentDate";
import { useTable } from "../../../centralizedControl/js/utils";
import { VACUUM_FORMULA_INFO_Z2 } from "@/views/centralizedControl/deviceOperation/vacuumFurnace/Z2/constant";
import { VACUUM_FORMULA_INFO_Z6 } from "@/views/centralizedControl/deviceOperation/vacuumFurnace/Z6/constant";
import { VACUUM_FORMULA_INFO_Z7 } from "@/views/centralizedControl/deviceOperation/vacuumFurnace/Z7/constant";
import { VACUUM_FORMULA_INFO_Z8 } from "@/views/centralizedControl/deviceOperation/vacuumFurnace/Z8/constant";
import { VACUUM_FORMULA_INFO_Z9 } from "@/views/centralizedControl/deviceOperation/vacuumFurnace/Z9/constant";
import { VACUUM_FORMULA_INFO_Z10 } from "@/views/centralizedControl/deviceOperation/vacuumFurnace/Z10/constant";
import { VACUUM_FORMULA_INFO_Z11 } from "@/views/centralizedControl/deviceOperation/vacuumFurnace/Z11/constant";
import { VACUUM_FORMULA_INFO_Z12 } from "@/views/centralizedControl/deviceOperation/vacuumFurnace/Z12/constant";
import { VACUUM_FORMULA_INFO_Z13 } from "@/views/centralizedControl/deviceOperation/vacuumFurnace/Z13/constant";
import { VACUUM_FORMULA_INFO_Z14 } from "@/views/centralizedControl/deviceOperation/vacuumFurnace/Z14/constant";
import { VACUUM_FORMULA_INFO_Z15 } from "@/views/centralizedControl/deviceOperation/vacuumFurnace/Z15/constant";
import { VACUUM_FORMULA_INFO_Z16 } from "@/views/centralizedControl/deviceOperation/vacuumFurnace/Z16/constant";
import { VACUUM_FORMULA_INFO_Z17 } from "@/views/centralizedControl/deviceOperation/vacuumFurnace/Z17/constant";
import { VACUUM_FORMULA_INFO_Z18 } from "@/views/centralizedControl/deviceOperation/vacuumFurnace/Z18/constant";
import { VACUUM_FORMULA_INFO_Z19 } from "@/views/centralizedControl/deviceOperation/vacuumFurnace/Z19/constant";
import { VACUUM_FORMULA_INFO_Z20 } from "@/views/centralizedControl/deviceOperation/vacuumFurnace/Z20/constant";
export default {
  props: {
    dataAll: {
      type: Array,
      default: () => []
    }
  },
  components: {
    Pagination,
    Search
  },
  computed: {
    ...mapGetters(["manufactureSiteList"]),
    renderStageTable() {
      return function(row) {
        if (row.manufactureSite.indexOf("真空") > -1) {
          return row.formulaDownloadZKInfo;
        } else {
          return row.formulaDownloadInfo;
        }
      };
    },
    getColumnList() {
      return COLUMN_LIST;
    },
    _formulaInfo(row) {
      return function(row) {
        if (row.manufactureSite.indexOf("真空") == -1) {
          return COLUMN_BASE_LIST;
        } else {
          //Z2号炉
          if (row.deviceToken === "1302022") {
            return VACUUM_FORMULA_INFO_Z2.filter(f => !f.hide);
          }
          //Z6号炉
          if (row.deviceToken === "1302058") {
            return VACUUM_FORMULA_INFO_Z6.filter(f => !f.hide);
          }
          //Z7号炉
          if (row.deviceToken === "1302046") {
            return VACUUM_FORMULA_INFO_Z7.filter(f => !f.hide);
          }
          //Z8号炉
          if (row.deviceToken === "1302041") {
            return VACUUM_FORMULA_INFO_Z8.filter(f => !f.hide);
          }
          //Z9号炉
          if (row.deviceToken === "1302042") {
            return VACUUM_FORMULA_INFO_Z9.filter(f => !f.hide);
          }
          //Z10号炉
          if (row.deviceToken === "13020078") {
            return VACUUM_FORMULA_INFO_Z10.filter(f => !f.hide);
          }
          //Z11号炉
          if (row.deviceToken === "1302060") {
            return VACUUM_FORMULA_INFO_Z11.filter(f => !f.hide);
          }
          //Z12号炉
          if (row.deviceToken === "1302031") {
            return VACUUM_FORMULA_INFO_Z12.filter(f => !f.hide);
          }
          //Z13号炉
          if (row.deviceToken === "13020072") {
            return VACUUM_FORMULA_INFO_Z13.filter(f => !f.hide);
          }
          //Z14号炉
          if (row.deviceToken === "13020074") {
            return VACUUM_FORMULA_INFO_Z14.filter(f => !f.hide);
          }
          //Z15号炉
          if (row.deviceToken === "13020086") {
            return VACUUM_FORMULA_INFO_Z15.filter(f => !f.hide);
          }
          //Z16号炉
          if (row.deviceToken === "13020088") {
            return VACUUM_FORMULA_INFO_Z16.filter(f => !f.hide);
          }
          //Z17号炉
          if (row.deviceToken === "13430175") {
            return VACUUM_FORMULA_INFO_Z17.filter(f => !f.hide);
          }
          //Z18号炉
          if (row.deviceToken === "13020092") {
            return VACUUM_FORMULA_INFO_Z18.filter(f => !f.hide);
          }
          //Z19号炉
          if (row.deviceToken === "13020091") {
            return VACUUM_FORMULA_INFO_Z19.filter(f => !f.hide);
          }
          //Z20号炉
          if (row.deviceToken === "13020097") {
            return VACUUM_FORMULA_INFO_Z20.filter(f => !f.hide);
          }
        }
      };
    },
    radioLable() {
      return function(item, downscope) {
        return (
          item.options.find(f => f.value == downscope.row[item.key])?.label ||
          "--"
        );
      };
    }
  },
  data() {
    return {
      activeName: "",
      activeToken: "",
      type: "列表",
      list: [],
      pageNum: 1,
      total: 0,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      screen: false,
      switchTextColor: "#666666",
      switchText: "显示筛选",
      searchParams: {}
    };
  },
  mounted() {
    this.activeName = this.$route.query.activeName
      ? this.$route.query.activeName
      : this.manufactureSiteList[0].name;
    this.activeToken = this.manufactureSiteList.find(
      item => item.name == this.activeName
    ).token;
    this.init();
  },
  methods: {
    setTableChildren(row) {
      if (this.activeName.indexOf("真空") > -1) {
        taskDownloadZK({
          manufactureSite: this.activeName,
          page: 1,
          pageSize: 9999,
          parentTaskNumber: row.taskNumber
        }).then(res => {
          row.children = res.data.results;
        });
      } else {
        getTaskDownLoadInfos({
          manufactureSite: this.activeName,
          page: 1,
          pageSize: 9999,
          parentTaskNumber: row.taskNumber
        }).then(res => {
          row.children = res.data.results;
        });
      }
    },
    handleClick(e) {
      this.activeToken = this.manufactureSiteList[e.index].token;
      console.log(this.activeToken);
      this.init();
    },
    changeType() {
      this.$emit("changeType", this.type);
    },
    setFilterList(data) {
      if (data) {
        this.switchTextColor = "#2680D2";
        this.switchText = "显示筛选 ( 已筛选 )";
      } else {
        this.switchTextColor = "#666666";
        this.switchText = "显示筛选";
      }
      this.pageNum = 1;
      this.searchParams = data;
      this.init();
    },
    init() {
      console.log(this.activeName.indexOf("真空"));
      if (this.activeName.indexOf("真空") > -1) {
        taskDownloadZK({
          manufactureSite: this.activeName,
          page: this.pageNum,
          pageSize: this.pageSize,
          parentTaskNumber: "ROOT",
          ...this.searchParams
        }).then(res => {
          this.list = res.data.results;
          this.total = res.data.numResults;
        });
      } else {
        getTaskDownLoadInfos({
          manufactureSite: this.activeName,
          page: this.pageNum,
          pageSize: this.pageSize,
          parentTaskNumber: "ROOT",
          ...this.searchParams
        }).then(res => {
          this.list = res.data.results;
          this.total = res.data.numResults;
        });
      }
    },
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.init();
    }
  }
};
</script>
<style lang="scss" scoped></style>
